<template>
  <div class="record-warrp">
      <div class="record-left">
         <div class="record-img">
            <div style="display:flex;justify-content: space-around;align-items:center;">
              <img src="" alt="" style="width: 50px;height: 50px;border-radius:30px">
              <h3>江玮</h3>
            </div>
            <hr/>
            <span style="font-size:14px;margin-left:10px;">东海市</span>

            <p style="writing-mode: vertical-rl;
                      font-size: 20px;
                      margin-top:30px;">当前材料</p>

             <p style="transform: translate(90deg);margin-left:30px;">:</p>
             <p style="writing-mode: vertical-rl;
                      font-size: 20px;
                      color:red;
                      margin-top:5px;
                      height: 200px;
                      ">1999年制干部履历表</p>
            
         </div>
      </div>
      <div class="record-center">
        <div class="left" :style="{ height: heightTree }">
      <el-tree
        ref="tree"
        style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px"
        :data="treeData"
        node-key="id"
        :props="defaultProps"
        highlight-current
        @node-click="handleNodeClick"
        :current-node-key="currentNodekey"
        :default-expanded-keys="[treeData[0].children[0]]"
      ></el-tree>
    </div>

    <div class="right">
      <div class="thumbnail" :style="{ height: heightY }">
        <img
          v-for="(image, index) in imageData"
          :src="image.description"
          :key="index"
          :style="{
            width: '140px',
            height: '200px',
            border: index === selectedImageIndex ? '2px solid red' : '',
          }"
          @click="selectImage(index)"
        />
      </div>
      <div class="bigPicture" :style="{ height: heightY }">
        <img
          :src="selectedImageData.description"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>
    </div>
      </div>
      <div class="record-rigth">
          <button class="buttonOne">全屏</button>
          <button class="buttonOne">上一页</button>
          <button class="buttonOne">下一页</button>
      </div>
  </div>
</template>

<script>
import { getMaterialTree, clickMaterial, getImgFromCacheByFlag } from "@/api/datacentersg/achives/documentApi";
export default {
  data() {
    return {
      heightY: window.innerHeight - 70 + "px",
      heightTree: window.innerHeight - 70 + "px",
      heightTrees: window.innerHeight - 80 + "px",
      tabPosition: "left",
      images: [],
      treeData: [],
      imageData:[],
      selectedImageIndex: 0,
      selectedImageData: {},
      defaultProps: {
        children: "children",
        label: "name",
      },
      currentNodekey: "", //默认选中的节点树
      name:'',
      idCard:'',
      description:'',
      materialid:'1',
    };
  },
  mounted() {
    this.getMaterialTree();
    this.init();
  },
  methods: {
    init(){
      let name = this.$route.query.name
      console.log(name,'name');
      let idCard = this.$route.query.idCard
      this.name = name;
      this.idCard = idCard;
    },
    // 获取人员档案左侧目录结构树
    getMaterialTree() {
      const params = {
        name: this.$route.query.name,
        idCard:this.$route.query.idCard, //身份证号
      };
      getMaterialTree(params).then((result) => {
        if (result.code === 0) {
          this.treeData = result.data.res_data;
          this.handleNodeClick(this.treeData[0].children[0]); // 默认展示第一个目录下的图片
        }
      });
    },
    selectChange() {},
    handleDefaultMenuSelect(index) {
      this.defaultActiveIndex = index; // 改变当前选中的菜单项
    },
    // 点击缩略图
    handleNodeClick(data) {
      if (data.children && data.children.length > 0) {
        // 点击的是父节点，不执行任何操作
        return;
      }
      this.currentNodekey = data.id;
      const materialid = this.materialid && this.currentNodekey;
      const params = {
        name: this.$route.query.name,
        idCard:this.$route.query.idCard, //身份证号
        materialid: materialid, //点击的目录ID
      };
      clickMaterial(params).then((result) => {
         if(result.code === 0){
             this.imageData = result.data.res_data;
             this.imageData.forEach((item,i)=>{
              const paramsNew = {
                name: this.$route.query.name,
                idCard:this.$route.query.idCard, //身份证号
                fileName:item.fileName,//文件名
              }
              getImgFromCacheByFlag(paramsNew).then((result) => {
                if(result.code === 0){
                  this.$set(item, 'description', result.data.res_data);
                }
              });
            })
            this.selectImage(0); // 默认展示第一张图片
         }
      })
      
    },
    // 获取base64图片
    selectImage(index) {
      this.selectedImageIndex = index;
      this.selectedImageData = this.imageData[index];
    },
  },
};
</script>

<style scoped>
>>> .el-menu-item {
  margin-top: 5px;
}
.left {
  float: left;
  margin-left: 22.625vw;
  background: #f7f2ec;
  width: 18.417vw;
  height: 100%;
  margin-top: 30px;
  overflow-y: scroll;
}
.right {
  float: left;
  margin-left: 15px;
  background: #f7f2ec;
  margin-top: 30px;
}
.thumbnail {
  width:8.813vw;
  overflow-y: scroll;
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  background: #fff;
}
.bigPicture {
  float: left;
  width: 500px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  background: #fff;
}
>>> .el-tree-node__content {
  height: 60px;
}
.record-warrp{
display: flex;
width: 100%;
height: 100%;
}
.record-left{
   width: 400px;
   height: 100%;
}
.record-img{
  width: 200px;
  height: 120px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.record-center{
   width: 1200px;
   height: 100%;
}
.record-rigth{
   width: 400px;
   height: 100%;
   margin-top:300px;
}

.el-menu-item{
  margin-top:5px;
}
.thumbnail{
  width: 150px;
  overflow-y: scroll;
  float: left;
}
.bigPicture{
  float: left;
  width: 500px;
}


.buttonOne{
  background: #009AE8;
  width: 70px;
  height:50px;
  font-size: 14px;
  border-radius: 10px;
  border: 1px solid #ccc;
  color: #fff;
  display: grid;
  line-height: 50px;
  text-align: center;
  margin-left: 170px;
  margin-top:5px;
}

/* background-color: #CFE5FC; */
</style>